import {  useEffect} from 'react';
import { useTheme } from 'next-themes';
import { useRouter } from 'next/router';


const ThemeStyle = () => {
  const { theme } = useTheme();
  const router = useRouter();

  var base = '';
  if (router.basePath) {
    base = router.basePath;
  }

  useEffect(() => {
    // 创建 link 元素
    const link = document.createElement('link');
    link.rel = 'stylesheet';

    link.href =
      theme === 'dark'
        ? `${base}/lib/github-markdown-css/github-markdown-dark-mini.css`
        : `${base}/lib/github-markdown-css/github-markdown-light-mini.css`; // 根据主题选择样式

    // 添加到 document.head
    document.head.appendChild(link);

    // 清理函数，卸载之前引入的样式
    return () => {
      document.head.removeChild(link);
    };
  }, [theme]);

  return <></>;
};

export default ThemeStyle;